<html>
<head lang="en">
    <meta charset="utf-8">
    <title>ECharts</title>
    <style type="text/css">
        #main{height:400px;width: 1000px}
    </style>
    <script src="../../static/js/echarts.min.js"></script>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化 echarts 实例并绘制图表。
    var myChart = echarts.init(document.getElementById("main"));
    var leaveDay = [5,5,4,3,2,4,2,6,2,5,3,7];
    var leave1 = leaveDay[0];
    var leave2 = leaveDay[1];
    var leave3 = leaveDay[2];
    var leave4 = leaveDay[3];
    var leave5 = leaveDay[4];
    var leave6 = leaveDay[5];
    var leave7 = leaveDay[6];
    var leave8 = leaveDay[7];
    var leave9 = leaveDay[8];
    var leave10 = leaveDay[9];
    var leave11 = leaveDay[10];
    var leave12 = leaveDay[11];
    // 指定图表的配置项和数据
    var option={
        title : {
            text: '某某公司员工每月出差信息',
        },
        tooltip : {
            trigger: 'axis'// trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
        },
        legend: {
            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'horizontal',
            data:['出差天数']
        },
        xAxis : [
            {
                type : 'category',//类目轴
                boundaryGap : false, // boundaryGap值为false的时候，折线第一个点在y轴上
                data : ['2021/1','2021/2','2021/3','2021/4','2021/5','2021/6','2021/7','2021/8','2021/9','2021/10','2021/11','2021/12']
            }
        ],
        yAxis : [
            {
                type : 'value',//数值轴
                axisLabel : {
                    formatter: '{value} 天'
                }
            }
        ],
        series : [
            {
                name:'出差天数',
                type:'line',//图形类型
                symbol:'circle',// 设置拐点为实心圆
                symbolSize:8,// 设置折线上圆点大小
                symbol: 'none',// 设置小圆点消失,注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                // smooth: 0.5,// 设置折线弧度，取值：0-1之间
                data:[leave1,leave2,leave3,leave4,leave5,leave6,leave7,leave8,leave9,leave10,leave11,leave12],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine:{
                    data:[
                        {type:'average',name:'平均值'}
                    ]
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
</script>
</body>
</html>